<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue基础</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <!--
            TODO:
            1.Vue中常用的按键别名（牢牢掌握）：
                回车 => enter
                删除 => delete (捕获“删除”和“退格”键)
                退出 => esc
                空格 => space
                换行 => tab（必须配	合keydown才有效果）
                上 => up
                下 => down
                左 => left
                右 => right
			2.备注：也可以使用keyCode去指定具体的按键（不太推荐）
		 -->
            <input type="text" placeholder="按下回车提示输入" /><br />
            <input type="text" placeholder="按下回车提示输入" /><br />
            <input type="text" placeholder="按下删除提示输入" /><br />
            <input type="text" placeholder="按下esc提示输入" /><br />
            <input type="text" placeholder="按下空格提示输入" /><br />
            <input type="text" placeholder="按下tab提示输入" /><br />
            <input type="text" placeholder="按下↓提示输入" /><br />
            <input type="text" placeholder="按下w提示输入" /><br />
            <input type="text" placeholder="按下alt+c提示输入" />
        </div>

        <script>
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                methods: {
                    keyModifier() {
                        console.log(event.target.value);
                    },
                },
            });
        </script>
    </body>
</html>
